<%@page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/pages/common/taglib.jsp"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>TzMarlon</title>
		<%@include file="/WEB-INF/pages/common/common.jsp"%>
		<script type="text/javascript" src="${basePath}/resources/js/keke_music.js" ></script>
		<script type="text/javascript" src="${basePath}/resources/js/keke_play.js" ></script>
		<script type="text/javascript" src="${basePath}/resources/js/tm_Relation.js" ></script>
	</head>
	<body style="background:url(${basePath}/resources/images/bg2.jpg)" data-type="1" data-typeid="${blog.categoryId}" data-filterid="${blog.id}">
		<!--头部-->
		<%@include file="../common/header.jsp" %>
		<!-- 内容区 -->
		<div class="container">
			<div class="mbox">
				<img src="${basePath}/${blog.img}" alt="" width="955px" height="350"/>
				<div class="p_over"></div>
				<div class="tit_over">
					<h1><i class="iconfont icon-music fz32" style="display:inline-block"></i>${blog.title}</h1>
					<p>${blog.createTime} @${blog.username} 
						<span id="time">${blog.musictime}</span>/<span id="ptime">00:00</span>
						<span id="percent">0%</span>
					</p>
					<a href="javascript:void(0);" class="ke_op"><i class="iconfont icon-play fz64"></i></a>
					<!-- 音轨的盒子 -->
					<div id="wrapbox"></div>
				</div>
			</div>
		
			<div class="content mt28">
				${blog.description}<br/>
				<audio src="${basePath}/${blog.musiclink}" id="audio" ></audio>
			</div> 
			
			<div class="relation">
				<h1><i class="iconfont icon-star fz32"></i>相似主题</h1>
				<ul id="relationbox"></ul>
			</div>

			<div class="clearfix"></div>
			<div id="comments">
				<div class="areabox">
					<textarea id="content" placeholder="请输入你要讲评论..."></textarea>
					<div class="subtn"><a href="javascript:volid(0)" onclick="tmRelation.saveComment()" class="fr"><i class="iconfont icon-fabiao"></i>发表言论</a></div>
				</div>
				<hr/>
				<div class="commentbox"></div>
			</div>
			<!--ie678不支持--->
		</div>
		<!-- end 内容区 -->
		<%@include file="../common/footer.jsp" %>
		<!--底部-->
		<script type="text/javascript">
			/*损坏图片的处理方案*/
			$(function(){
				$("img").on("error",function(){
					$(this).attr("src",basePath+"/resource/images/noimage.gif");
				});
				tmRelation.load();//加载相似主题
				tmRelation.loadComment(1);//加载评论内容
			});
		</script>
	</body>
</html>